<template>
  <div>
    用户名: <input v-model="user.name" type="text">
    年龄: <input v-model="user.age" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{
        name: '',
        age: ''
      }
    }
  },
  // 侦听器默认情况无法监听引用类型
  // 如果需要监听引用类型的属性变化, 就需要使用深度监听
  // 如果需要页面钢价在就执行一次, 可以使用立即执行配置,
  // 完整写法:
  // 验监听的属性名: { deep: true, handler() {} }
  watch: {
    user: {
      // immediate: true, // 页面加载时立即执行一次
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        // 监听引用数据类型时, newVal 和 oldVal 是一样的, oldVal 失效了
        // 不影响开发, 开发是绝大部分情况下都是使用新的值
        // 官方Bug, 在 Vue 3 中修复了
        console.log(newVal.name, oldVal.name)
        console.log(this.user)
      }
    }
  }
};
</script>

<style lang="scss" scoped>

</style>